<mat-card>
  <table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort>
    <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
    <ng-container matColumnDef="expandedDetail">
      <td colspan="4" mat-cell *matCellDef="let element">
        <div style="overflow: hidden"
             [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          The symbol for {{element.name}} is {{element.symbol}}
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"
        class="demo-element-row"
        [class.demo-expanded]="expandedElement == row"
        (click)="expandedElement = expandedElement === row ? undefined : row"></tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']"
        class="demo-detail-row"></tr>
  </table>

  <mat-paginator pageSize="20" [pageSizeOptions]="[5, 20]"></mat-paginator>
</mat-card>